<template>
  <div class="form-layout">
    <!--左侧导航-->
    <div class="nav-left">
      <customAnchor :itemList="[{ name: 'box-base', title: '基础信息' },{ name: 'box-list', title: '用户菜单权限' }]" />
    </div>
    <!--表单区域-->
    <div class="form-right" ref="formRight">
      <customForm :data="form" :rules="propRules" ref="editForm" :disabled="propReadonly">
        <template #content>
          <div id="box-base" class="box-title">角色信息</div>
          <customFormItem label="角色名称" name="name" :parent="_self" :form="form" />
          <customFormItem label="角色编码" name="code" :parent="_self" :form="form" />
          <customFormItem label="描述" name="description" :parent="_self" :form="form" />
        </template>
      </customForm>

      <div id="box-list" class="box-title">用户菜单权限</div>
      <customEmpty  :show="propParent.cpFormNew" title="保存完再设置"/>
      <div  v-if="!propParent.cpFormNew">
        <div class="row-box-left">
          <h3>
            用户权限
            <customButton @click="utilSelect.userListMore(userAddSelect, form.id)" title="选择用户" theme="primary" size="small" style="float: right"/>
          </h3>
          <data-view
            propViewKey="sys_user_for_role"
            :propIsTdesign="true"
            :propParentPage="_self"
            ref="listUser"
            :propAutoFetchData="false"
            :propNoEditRow="true"
            :propUserParam="cpPropUserParam"
            @btnClick="btnClick"
          />
        </div>
        <div  class="row-box-right">
          <h3>
            菜单权限
            <customButton  @click="saveMenu" title="保存" theme="primary" size="small" help="保存菜单权限"   helpDisabled="请先保存主单局" style="float: right"/>
          </h3>
          <treeRoleMenu :roleId="form.id"  :checkIdList="cpMenuIds" ref="treeRoleMenu"></treeRoleMenu>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import customAnchor from '@/components/custom/form/customAnchor.vue'
import treeRoleMenu from '@/components/custom/bus/treeRoleMenu.vue'

export default {
  remark:'角色管理-详情',
  data() {
    return {
      form: {},
      viewData: {},
    }
  },
  methods: {
    // 刷新用户列表
    listUser() {
      let queryWrapper = this.$newWrapper()
      this.$refs.listUser.setQueryWrapper(queryWrapper)
    },
    // 保存权限操作
    saveMenu() {
      this.utilMessage.confirm(`是否保存菜单权限？`, () => {
        this._saveMenu()
      })
    },

    // 保存权限操作
    _saveMenu(type, msg) {
      let checkIdAll = this.$refs.treeRoleMenu.getInst().getCheckDataList(true).map(item2 => {
        return item2.id
      })
      let idListAdd = checkIdAll.filter(id => !this.cpMenuIds.includes(id))
      let idListDelete = this.cpMenuIds.filter(id => !checkIdAll.includes(id))
      if (idListAdd.length == 0 && idListDelete.length == 0) {
        this.utilMessage.warning('菜单权限没有变化，无需保存')
        return
      }
      console.log('check', this.$refs.treeRoleMenu.getInst().getCheckDataList(false))
      this.$set(this.form,'menuIds', checkIdAll)
      this.propParent.ocAsynSaveViewForm()
    },

    // 添加新用户
    userAddSelect(rows) {
      this.utilMessage.confirm(`是否添加所选用户,数量: ${rows.length}`, () => {
        this.utilVue.loadShow(true)
        this.$ajax.post(`/upms/roles/${this.form.id}/users`, rows.map(o => o.id)).then((resp) => {
          this.utilVue.loadHide()
          if (resp.code == 0) {
            this.utilMessage.success(resp.msg)
            this.listUser()
          }
        })
      })
    },

    // 顶部按钮
    btnClick({button,data}) {
      switch (button.key) {
        case 'removeOne':{ //移除
          this.utilMessage.confirm(`是否移除所选用户权限`, () => {
            this.utilVue.loadShow(true)
            this.$ajax.delete(`/upms/roles/${this.form.id}/users/${data.id}`).then((resp) => {
              this.utilVue.loadHide()
              if (resp.code == 0) {
                this.utilMessage.success(resp.msg)
                this.listUser()
              }
            })
          })
          break
        }
      }
    }
  },
  created() {
    this.$emit('event-register', {
      validate: (callback) => {
        return this.$refs.editForm.validate(callback)
      },
      beforeSave: () => {
        this.$emit('data-callback', this.form)
        return true
      },
      afterMove: (formData, initData) => {
        this.form = global.utils.jsonClone(formData)
        this.$set(this.form, 'id', this.form.id)
        if (!this.propParent.cpFormNew) {
          this.$nextTick( ()=> {
            this.listUser()
          })
        }
      },
      afterSave: () => {
      },
      beforeDelete: () => {
        return true
      },
      afterDelete: () => {
      },
      beforeFlow: (flowButtonKey) => {
        return true
      },
      afterFlow: (flowButtonKey) => {
      },
      beforeClose: () => {
        return true
      },
    })
  },
  props: {
    propParent: Object,
    propInitData: Object,
    propPrimaryKey: String,
    propDictionaries: Object,
    propCurrentRow: Object,
    propViewFormData: Object,
    propReadonly: Boolean,
    propStatus: String,
    propRules: Object,
  },
  components: { customAnchor, treeRoleMenu },
  computed: {
    cpPropUserParam() {
      return {roleId: this.strings.defaultString(this.form.id, '-1')}
    },
    cpMenuIds() {
      return this.form.menuIds || []
    }
  },
}
</script>

<style lang="scss" scoped>
.row-box-left,.row-box-right {
  display: inline-block;
  width: 50%;
  vertical-align: top;
  padding: 0px 10px;
}
</style>
